<template>
  <div>
    第一个盒子
  </div>
</template>

<script>
export default {
    name: 'ComOne'
}
</script>

<style scoped>
/* 1. 组件styel里的样式默认是作用到全局的
   2. 加上scoped属性,可以让样式变成局部的  推荐组件写样式都加上scoped
   scoped 原理
   1. 给当前模板的所有元素加上一个自定义属性   data-v-hash值 (data-v-052b7656)
   2. css选择器后面会自动处理,利用属性选择器加样式
  
*/
div {
    background: red;
    width: 300px;
    height: 300px;
}
</style>